import { Col, message, Select } from 'antd';
import React, {useState, useEffect} from 'react';
import { cloneDeep } from 'lodash';
import services from '../../../services/api';
import ProgressBox from '../../../components/ProgressBox';
import '../index.less'
const {Option} = Select
export default function riskMent(props) {
  const [options, setOptions] = useState([]);
  const [riskData, setRiskData] = useState({});
  // const [selectType, setSelectType] = useState('request'); // 选择查看类型
  const selectType = 'request'
  const [grainType, setGrainType] = useState('reject'); // 第二选择类型
  useEffect(()=> {
    setOptions(requesList)
  },[])
  useEffect(() => {
    const lists = reastData(selectType, cloneDeep(props.data));
    setRiskData(lists);
  },[props.data])
  const requesList = [{
    name: '拒绝请求量',
    value: 'reject'
  },{
    name: '复核请求量',
    value: 'review'
  }];
  // const ratioList = [{
  //   name: '拒绝率',
  //   value: 'reject'
  // },{
  //   name: '复核率',
  //   value: 'review'
  // }];
  // function onChange(value) {
  //   setSelectType(value);
  //   if (value === 'rdito') {
  //     setOptions(ratioList);
  //   } else {
  //     setOptions(requesList);
  //   }
  //   handleChange('reject', value);
  // };
  // 请求风险
  function getRiskData(types, grain) {
    const params = {
      sort: grain || grainType,
      ...props.requestParam
    }
    services[props.actionType].riskRanking(params).then(res => {
      if (!res.code) {
        const list = reastData(types, cloneDeep(res.data));
        setRiskData(list);
      } else {
        message.error(res.msg);
      }
    })
  };
  function handleChange(values, types) {
    const type =  typeof types === 'string' ? types : selectType;
    setGrainType(values);
    getRiskData(type, values);
  };
  // 下载
  function downFile () {
    const params = {
      sort: grainType,
      ...props.requestParam
    }
    props.downFile && props.downFile(params, 'd5');
  };
  // 重置函数
  function reastData(types, data) {
    if (types === 'request' || !Object.keys(data).length) return data;
    data.risk_top_ip.requests = data.risk_top_ip.requests.map(item => {
       const rdito = (data.risk_top_ip.count && ((item.doc_count / data.risk_top_ip.count) * 10000).toFixed() / 100) || 0;
       item.doc_count = rdito;
       return item
    });
    data.risk_top_user.requests = data.risk_top_user.requests.map(item => {
      const rdito = (data.risk_top_user.count && ((item.doc_count / data.risk_top_user.count) * 10000).toFixed() / 100) || 0;
      item.doc_count = rdito;
      return item
    });
    data.risk_top_device.requests = data.risk_top_device.requests.map(item => {
      const rdito = (data.risk_top_device.count && ((item.doc_count / data.risk_top_device.count) * 10000).toFixed() / 100) || 0;
      item.doc_count = rdito;
      return item
    });
    return data;
  };
  return (
    <>
      <div className='title-dash-boxs'>
        <p>风险排行</p>
        <div className='title-dash-children'>
          {!props.isDisable ? (<><p onClick={downFile}>下载数据</p>
          {/* <div>
            <Select
              style={{ width: 150 }}
              placeholder="请选择"
              value={selectType}
              onChange={onChange}
            >
            <Option value={'request'} key={'1q'}>按请求量查看</Option>
            <Option value={'rdito'} key={'1r'}>按比率查看</Option>
           </Select>
          </div> */}
          </>) : '' }
          <div>
            <Select
              style={{ width: 150 }}
              placeholder="请选择"
              value={grainType}
              onChange={handleChange}
            >
             {options.map(item => {
                return (<Option value={item.value} key={item.value}>{item.name}</Option>)
             })}
           </Select>
          </div>
        </div>
      </div>
      <div className='risk-ment-page'>
        <Col key={1} span={8}>
          <div className='policy-progress-boxs'>
             <p>IP排行</p>
             <div>
               <ProgressBox
                 leftLabel= 'ip'
                 rightLabel={selectType=== 'request' ? '访问量' : '访问率'}
                 keyValue={['key', 'doc_count']}
                 dataSource={(Object.keys(riskData).length && riskData.risk_top_ip.requests) || []}
                 total={selectType === 'request' ? (Object.keys(riskData).length ? riskData.risk_top_ip.count : 100) : 100}
                 renderLabel= {(record, index) => {
                   return (
                     <>
                      <span style={{ marginRight: '10px' }}>{index + 1}</span>
                      {record.key}
                     </>
                    );
                   }
                 }
                 renderValue= {(record, index) => {
                     return selectType=== 'request' ? record.doc_count : (record.doc_count +'%')
                   }
                 }
               />
             </div>
          </div>
        </Col>
        <Col key={2} span={8}>
          <div className='policy-progress-boxs'>
             <p>账户排行</p>
             <div>
               <ProgressBox
                 leftLabel= '账户'
                 rightLabel={selectType=== 'request' ? '账户命中数' : '账户命中率'}
                 keyValue={['key', 'doc_count']}
                 dataSource={ (Object.keys(riskData).length && riskData.risk_top_user.requests) || []}
                 total={selectType === 'request' ? (Object.keys(riskData).length ? riskData.risk_top_user.count : 100) : 100}
                 renderLabel={(record, index) => {
                  return (
                    <>
                     <span style={{ marginRight: '10px' }}>{index + 1}</span>
                     {record.key}
                    </>
                   );
                  }
                }
                renderValue= {(record, index) => {
                  return selectType=== 'request' ? record.doc_count : (record.doc_count +'%')
                }
              }
               />
             </div>
          </div>
        </Col>
        <Col key={3} span={8}>
          <div className='policy-progress-boxs'>
             <p>指纹排行</p>
             <div>
               <ProgressBox
                 leftLabel= '指纹'
                 rightLabel= {selectType=== 'request' ? '指纹命中数' : '指纹命中率'}
                 keyValue={['key', 'doc_count']}
                 dataSource={(Object.keys(riskData).length && riskData.risk_top_device.requests) || []}
                 total={selectType === 'request' ? (Object.keys(riskData).length ? riskData.risk_top_device.count : 100) : 100}
                 renderLabel={(record, index) => {
                  return (
                    <>
                     <span style={{ marginRight: '10px' }}>{index + 1}</span>
                     {record.key}
                    </>
                   );
                  }
                }
                renderValue= {(record, index) => {
                  return selectType=== 'request' ? record.doc_count : (record.doc_count +'%')
                 }
                }
               />
             </div>
          </div>
        </Col>
      </div>
    </>
  )
}